<template>
  <div class="main pb20 pt116">
    <div class="padding-tb-15">
      <Breadcrumb separator="">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadSeparator>:</BreadSeparator>
        <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
        <BreadSeparator>></BreadSeparator>
        <BreadcrumbItem>人员数据</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <Collapse v-model:activeKey="activeKey" expandIconPosition="right">
      <CollapsePanel key="1" header="筛选条件">
        <div class="comp-query">
          <div class="comp-query-form">
            <Form :wrapper-col="{ span: 18 }">
              <Row :gutter="[24, 24]">
                <Col :span="8">
                  <FormItem label="地域属性">
                    <RadioGroup v-model:value="queryParam.areaType">
                      <Radio value="">全部</Radio>
                      <Radio value="et">进疆人员</Radio>
                    </RadioGroup>
                  </FormItem>
                </Col>
                <Col :span="16">
                </Col>
              </Row>
              <Row :gutter="[24,  12]">
                <Col :span="24">
                  <FormItem label="人员类型" :wrapper-col="{ span: 22 }">
                    <RadioGroup class="w" v-model:value="queryParam.ptype" @change="RadioGroupChange">
                      <RadioButton value="" >全部</RadioButton>
                      <RadioButton :value="item.code" v-for="item in staffQualRef">{{ item.name }}</RadioButton>
                    </RadioGroup>
                  </FormItem>
                </Col>

              </Row>
              <Row :gutter="[24, 24]">
                <Col :span="8">
                  <FormItem label="证书类别">
                    <Select v-model:value="queryParam.certType">
                      <Option value="">请选择类型</Option>
                      <Option :value="item.id" v-for="item in certTypeRef" >{{ item.dataValue }}</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col :span="8">
                  <FormItem label="人员姓名">
                    <Input
                      v-model:value="queryParam.name"
                      placeholder="请输入人员姓名"
                    />
                  </FormItem>
                </Col>
                <Col :span="8">
                  <FormItem label="身份证号">
                    <Input
                      v-model:value="queryParam.idCard"
                      placeholder="请输入身份证号"
                    />
                  </FormItem>
                </Col>

              </Row>
              <Row :gutter="[24, 24]">
                <Col :span="16">
                  查询结果：共<span class="red">{{ pagination.total }}</span
                  >条数据
                </Col>
                <Col :span="8" class="text-right">
                  <Button type="primary" ghost @click="handleReset"
                    >重置</Button
                  >
                  <Button type="primary" @click="handleSearch">立即查询</Button>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </CollapsePanel>
    </Collapse>
    <div class="comp-table">
      <Table
        :dataSource="dataSource"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :rowKey="(dataSource) => dataSource.personId"
        @change="handleTableChange"
      >
        <template #num="{ index }">
          <span>{{
            (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
          }}</span>
        </template>
        <template #name="{ text, record }">
          <router-link
            target="_blank"
            :to="{ path: `/staff/${record.personId}` }"
            class="blue"
            >{{ text }}</router-link
          >
        </template>
        <template #qual="{ record }">
          <ul class="certificate">
            <li v-for="item in record.qualTypeList" :key="item">{{ item }}</li>
          </ul>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" >
import {
  defineComponent,
  ref,
  unref,
  toRefs,
  onMounted,
  reactive,
  watch,
} from "vue";
import {
  Row,
  Col,
  Form,
  Input,
  Button,
  Select,
  Table,
  Breadcrumb,
  Collapse, Radio,

} from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { getStaffListApi , getStaffQualApi } from "/@/api/staff";

interface queryConfig {
  complex: string;
  areaType: string;
  name: string;
  idCard: string;
  ptype: string;
  certType: string;
  current: number;
  size: number;
}

interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}

const columns = [
  {
    title: "序号",
    width: 100,
    align: "center",
    slots: { customRender: "num" },
  },
  {
    title: "人员姓名",
    width: 160,
    dataIndex: "personName",
    slots: { customRender: "name" },
  },
  {
    title: "证件号码",
    width: 260,
    dataIndex: "cardNo",
  },
  {
    title: "人员类别标签",
    dataIndex: "qualType",
    slots: { customRender: "qual" },
  },
];

export default defineComponent({
  name: "ModuleStaff",
  components: {
    Row, Col,  Form, FormItem: Form.Item, Input, Button,
    Select, Option: Select.Option, Table, Breadcrumb, BreadcrumbItem: Breadcrumb.Item,
    BreadSeparator: Breadcrumb.Separator,
    Collapse, CollapsePanel: Collapse.Panel,
    RadioGroup:Radio.Group , Radio ,RadioButton:Radio.Button
  },
  setup() {
    const activeKey = ref(['1']);
    const search = ref<string>("");
    const { query } = toRefs(useRoute());
    const router = useRouter();
    let staffQual:any = [];
    const loading = ref<boolean>(true);
    search.value = (unref(query).search as string) || "";
    const dataSource = ref<unknown[]>([]);
    const staffQualRef = ref<unknown[]>([]);
    const certTypeRef = ref<unknown[]>([]);
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10, //每页中显示10条数据
    });

    let queryParam = reactive<queryConfig>({
      areaType:'',
      complex: (unref(query).search as string) || "",
      name: "",
      certType: "",
      idCard: "",
      ptype: "",
      current: 1,
      size: 10,
    });

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    };

    const getTableList = async () => {
      loading.value = true;
      let data = await getStaffListApi(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records || [];
      loading.value = false;
    };

    const RadioGroupChange = (data) => {
      queryParam.certType = '';
      let key = data.target.value;
      const staItem = staffQual.filter(item=>item.code === key) as any;
      certTypeRef.value = staItem[0].children
    };

    const handleSearch = () => {
      queryParam.complex = queryParam.complex
        ? queryParam.complex
        : (unref(query).search as string);
      queryParam.current = 1;
      paginationRef.value.current = 1;
      getTableList();
    };

    const handleReset = () => {
      router.push({
        query: { search: "" },
      });
      Object.assign(queryParam, {
        complex: "",
        name: "",
        ptype: "",
        areaType: "",
        idCard: "",
        certType: "",
        current: 1,
      });
      getTableList();
    };

    onMounted(() => {
      getTableList();
      getStaffQualApi().then(data=> {
        let letArr:any = [];
        if(data.length){
          data.forEach(item=>{
            letArr.push({
              name:item.name,
              code:item.code
            })
          })
        }
        staffQualRef.value = letArr;
        staffQual = data;
      })
    });

    watch(query, (cur) => {
      if (cur.search) {
        queryParam.complex = cur.search.toString();
        getTableList();
      }
    });

    return {
      activeKey,
      queryParam,
      dataSource,
      columns,
      loading,
      pagination: paginationRef,
      getTableList,
      handleSearch,
      handleReset,
      handleTableChange,
      staffQualRef,
      RadioGroupChange,
      certTypeRef
    };
  },
});
</script>

<style lang="less">
.comp-query {
  .ant-form-item-label {
    > label {
      color: @grey;
    }
  }

  .ant-form-item {
    margin-bottom: 0;
  }

  .ant-btn {
    margin-right: 16px;

    &:last-child {
      margin-right: 22px;
    }
  }
}
</style>

<style lang="less" scoped>
::v-deep(.ant-table-thead) {
  tr {
    th {
      background: #fff;
    }
  }
}

.comp-query {
  padding: 2px 5px;
  background: @white;

   ::v-deep(.ant-form-item-label) {
    > label {
      color: @grey;
    }
  }

  ::v-deep(.ant-form-item) {
    margin-bottom: 0;
  }

  ::v-deep(.ant-btn) {
    margin-right: 16px;

    &:last-child {
      margin-right: 22px;
    }
  }
}

.comp-table {
  padding: 0 30px;
  margin-top: 15px;
  background: @white;

  .certificate {
    display: flex;
    justify-content: start;
    margin-bottom: 0;

    li {
      width: 84px;
      height: 32px;
      margin-right: 8px;
      line-height: 31px;
      text-align: center;

      &:nth-child(1) {
        color: #216de5;
        background: rgba(33, 109, 229, 0.1);
      }

      &:nth-child(2) {
        color: rgba(255, 111, 39, 1);
        background: rgba(255, 111, 39, 0.1);
      }

      &:nth-child(3) {
        color: rgba(255, 3, 3, 1);
        background: rgba(255, 3, 3, 0.1);
      }

      &:nth-child(4) {
        color: rgba(14, 200, 20, 1);
        background: rgba(14, 200, 20, 0.1);
      }

      &:nth-child(5) {
        color: rgba(0, 191, 213, 1);
        background: rgba(0, 191, 213, 0.1);
      }

      &:nth-child(6) {
        color: rgba(78, 33, 229, 1);
        background: rgba(78, 33, 229, 0.1);
      }
    }
  }
}

::v-deep(.ant-radio-group){
  &.w{
    label{
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

</style>
